<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
    <head>        
        <!-- META SECTION -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <!-- END META SECTION -->
        
        <!-- CSS INCLUDE -->        
        <link rel="stylesheet" href="${ctx}/rs/css/bootstrap-table.css" />
        <link rel="stylesheet" href="${ctx}/rs/css/main.css" />
        <link id="theme" rel="stylesheet" href="${ctx}/rs/joli/css/theme-default.css" />
        <!-- EOF CSS INCLUDE -->      
         <style type="text/css">
        	#m-info {
				position: absolute;
				top: 0;left: 0;
				/*background-color: rgba(0,0,0,.7);*/
				width: 350px;height: 400px;
				/*color: #fff;
				padding:10px;
				font-size: 12px;*/
				display: none;
			}
			#m-info img { width:100%;}
        </style>                                 
    </head>
<body>
	
	<!-- START PAGE CONTAINER -->
        <div class="page-container">
        	<!-- 引入左菜单部分 -->
            <jsp:include page="../joli/menu.jsp"></jsp:include>
            
            <!-- START PAGE CONTENT -->
            <div class="page-content">
                
                <jsp:include page="../joli/top.jsp"></jsp:include>
                
                <!-- START BREADCRUMB -->
                <ul class="breadcrumb">
                    <li><a href="#">客户管理</a></li>                    
                    <li class="active">广告客户</li>
                </ul>
                <!-- END BREADCRUMB -->   
                
                
                <!-- PAGE CONTENT WRAPPER -->
                <div class="page-content-wrap">
                	<div class="row">
                		<div class="col-xs-12">
                			<div id="toolbar">
								<div class="fr pb10">
								状态&nbsp;:<select class="srt-put1 mr10 widput1" id="selectStatus" onchange="refresh()">
									<option value="-1">全部</option>
									<option value="0">待审核</option>
									<option value="1">审核通过</option>
									<option value="2">审核不通过</option>
									<option value="3">禁用</option>
									<option value="4">注销</option>
								</select>
								     联系电话：
								  <input type="text" class="srt-put1 mr10 widput1" id="telphone" name="telphone"/>
								     账号：
								  <input type="text" class="srt-put1 mr10 widput1" id="email" name="email"/>
								  <button class="btn btn-primary btn-sm srt-btn active" onclick="refresh()">搜索</button>
							    </div>
							</div>
							
							<table id="table" cellpadding="0" cellspacing="0" data-toggle="table" data-toolbar="#toolbar"
								data-url="${ctx}/aduser/userpage.htm?role=5"
								data-cache="false"
								data-pagination="true" 
								data-side-pagination="server"
								data-page-list="[10, 20, 50, 100]"
								data-page-size="20"  
								data-query-params="queryParams">
								<thead>
									<tr class="tab-th">
										<!-- <th data-field="state" data-checkbox="true"></th> -->
										<th data-field="id" >编号</th>
										<th data-field="showValue" class="col-md-1">客户类型</th>
										<th data-field="username" class="col-md-1">客户名称</th>
										<th data-field="emailurl" class="col-md-1">账号</th>
										<th data-field="linkname" class="col-md-1">联系人</th>
										<th data-field="telphone" class="col-md-1">联系电话</th>
										<th data-field="businessli" data-formatter="logoFormatter" class="col-md-1">营业执照</th>
										<th data-field="status" data-formatter="statusFormatter" class="col-md-1">用户状态</th>
										<th data-field="create_time" data-formatter="timeFormatter" class="col-md-2">注册日期</th>
										<th data-field="action" data-formatter="actionFormatter" class="col-md-2">操作</th>
									</tr>
								</thead>
							</table>
                		</div>
             		</div>
            	</div>
		</div>
		<div id="m-info"></div>
		<div class="modal fade" id="modal3" role="dialog" aria-labelledby="gridSystemModalLabel" data-backdrop="static" >
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">账号禁用</h4>
		      </div>
		      <div class="modal-body">
		      <form  class="form-horizontal">
		         <div class="form-group">
		            <label for="recipient-name" class="control-label col-sm-2">备注</label>
		            <div class="col-sm-10"><textarea class="form-control reason2" row = 3 style="width:300px;"placeholder=" 请输入禁用的理由 "></textarea></div>
		          </div>
		        </form>  
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-success btnAjax2">确认</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		<div class="modal fade" id="modal4" role="dialog" aria-labelledby="gridSystemModalLabel" data-backdrop="static" >
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">账号注销</h4>
		      </div>
		      <div class="modal-body">
		      <form  class="form-horizontal">
		         <div class="form-group">
		            <label for="recipient-name" class="control-label col-sm-2">备注</label>
		            <div class="col-sm-10"><textarea class="form-control reason3" row = 3 style="width:300px;"placeholder=" 请输入注销的理由 "></textarea></div>
		          </div>
		        </form>  
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-success btnAjax3">确认</button>
		      </div>
		    </div>
		  </div>
		</div>
	<!-- 引入所有joli的脚本 -->
	<jsp:include page="../joli/scripts.jsp"></jsp:include>
	<!-- 引入页面需要的脚本 -->
	<script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table-zh-CN.js"></script>
	<script src="${ctx}/rs/js/jquery.formatDate.js"></script>
	<script src="${ctx}/rs/js/my97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${ctx}/rs/js/session-out-error.js"></script>
	<script>
	
	  activeMenu($("#menu_user_2"));
	  var $table = $('#table');
      
      $table.on('click-row.bs.table', function (e, row, $element) {
	    	$table.bootstrapTable('uncheckAll');
	    	$table.bootstrapTable('check', $element.index());
      });
      
      $table.bootstrapTable({
          height: getHeight()
      });
	    
      //获取分辨率高度
	    function getHeight() {
	        return window.screen.height - 308;
	    }
	    
	    $(window).resize(function () {
      	$table.bootstrapTable('resetView',{height: getHeight()});
      });
	    
	    //初始化刷新
	     function refresh(pageIndex,selectPage){
	    	 var selectStatus = $("#selectStatus").val();
		     var telphone = $("#telphone").val();
		     var email = $("#email").val();
	    	if(!pageIndex && !selectPage){
	    		pageIndex = 0;
	    		selectPage = 0;
	    	}
			var pageSize = $table.bootstrapTable('getOptions').pageSize;
			pageIndex=pageIndex*pageSize;
	    	$table.bootstrapTable('refresh', {
	    		silent: true,
	    		cache : false,
	    		url: '${ctx}/aduser/userpage.htm',
	    		contentType:'application/x-www-form-urlencoded; charset=UTF-8',
                query: {
                	telphone : telphone,
                	email :email,
   					pageIndex : pageIndex,
   					pageSize : pageSize,
   					role : 5,
   					status : selectStatus
   				}
           });
	    	$table.bootstrapTable('selectPage', selectPage);
	    }
	    
	     function statusFormatter(value, row, index){
	    	 var statusName ="";
	    	 switch (value){
	    	 case 0:
	    		 statusName = "<span class='label label-warning'>待审核</span>";
	    		 break;
	    	 case 1:
	    		 statusName = "<span class='label label-success'>正常</span>";
	    		 break;
	    	 case 2:
	    		 statusName = "<span class='label label-primary'>已拒绝</span>";
	    		 break;
	    	 case 3:
	    		 statusName = "<span class='label label-danger'>禁用</span>";
	    		 break;
	    	 }
				return statusName;
			}
	     
	     function ToRole(value, row, index){
	    	 var roleName ="";
	    	 switch (value){
	    	 case 4:
	    		 roleName = "<span class='label label-info'>媒体主</span>";
	    		 break;
	    	 case 5:
	    		 roleName = "<span class='label label-danger'>广告主</span>";
	    		 break;
	    	 }
				return roleName;
			}
	    
	 	function actionFormatter(value, row, index){
	 		var retbak="";
	 		switch(row.status){
	 		case 1:
	 			retbak='<a class="mr15" href="javascript:detail('+row.id+')">详情</a><a class="mr15" href="javascript:updateStatus('+row.id+',3)">禁用</a><a class="mr15" href="javascript:updateStatus('+row.id+',4)">注销</a>';
	 			break;
	 		case 2:
	 			retbak='<a class="mr15" href="javascript:detail('+row.id+')">详情</a><a class="mr15" href="javascript:updateStatus('+row.id+',1)">二次通过</a>';
	 			break;
	 		case 3:
	 			retbak='<a class="mr15" href="javascript:detail('+row.id+')">详情</a><a class="mr15" href="javascript:updateStatus('+row.id+',1)">启用</a><a class="mr15" href="javascript:updateStatus('+row.id+',4)">注销</a>';
	 			break;
	 		}
			return retbak;
		}

	 	
		function logoFormatter(value, row, index) {
			if (value == ''||value==null) {
				return "无图片";
			} else {
				return '<image src="'+value+'" style="width:50px;height:50px;"/>';
			}
		}
		
	    function queryParams(params) {
			return {
				pageIndex : params.offset,
				pageSize : params.limit
			};
		}
		
		function timeFormatter(value, row, index){
			 if(value){
				 return $.formatDate("yyyy-MM-dd HH:mm:ss", new Date(value));
			 }
			 return "--";
		}
		
		function detail(id) {
			bootstrapQ.dialog({
				url : "${ctx}/aduser/detail.htm?id="+ id,
				title : "客户详细信息",
				width: '720px',
				close : 'true',
				hidebtn : 'true'
			},function(){
				//回调触发关闭窗口
				$("#bsmodal").modal("hide");
			});
   		}
		
		
		function updateStatus(id,status){
			 var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
			 var pageIndex = pageNumber - 1;
			   
			if(status==1){
				bootstrapQ.confirm('确定审核通过该账号?',function(){
	        		$.ajax({
	             	   url: "${ctx}/aduser/pass.htm",
	             	  type: 'POST',
	                  data: {
	                	  id:id,
	                	  status:status,
	                	  reason:"审核通过"
	                  },
	                    success: function (text) {
	                    	bootstrapQ.msg({
	 						    msg  : '操作成功！',
	 						    type : 'success',
	 						    time : 2000
	 						});
	                    	setTimeout("window.location.reload(true)",1000);
	                    },
	                    error: function () {
	                    	bootstrapQ.msg({
	 						    msg  : '操作失败！',
	 						    type : 'danger',
	 						    time : 2000
	 						});
	                    	setTimeout("window.location.reload(true)",1000);
	                    }
	                });
				},null);
			}else if(status==3){
				  $("#modal3").modal("show");
				  $(".btnAjax2").on('click',function(){
					  var reason = $(".reason2").val();
					  if(!reason){
			                alert("请填写禁用理由！");
			                return;
			            }if(reason.length>500){
			                alert("理由不超过500字！");
			                return;
			            }
					  $.ajax({
		             	   url: "${ctx}/aduser/pass.htm", 
		             	  type: 'POST',
		                  data: {
		                	  id:id,
		                	  status:status,
		                	  reason:reason
		                  },
		                    success: function (text) {
		                    	bootstrapQ.msg({
		 						    msg  : '操作成功！',
		 						    type : 'success',
		 						    time : 2000
		 						});
		                    	setTimeout("window.location.reload(true)",1000);
		                    },
		                    error: function () {
		                    	bootstrapQ.msg({
		 						    msg  : '操作失败！',
		 						    type : 'danger',
		 						    time : 2000
		 						});
		                    	setTimeout("window.location.reload(true)",1000);
		                    } 
		             }); 
				  })
			}else if(status==4){
				  $("#modal4").modal("show");
				  $(".btnAjax3").on('click',function(){
					  var reason = $(".reason3").val();
					  if(!reason){
			                alert("请填写注销理由！");
			                return;
			            }
					  if(reason.length>500){
                          alert("注销理由不超过500字！");
                          return;
                      }
					  $.ajax({
		             	   url: "${ctx}/aduser/pass.htm", 
		             	  type: 'POST',
		                  data: {
		                	  id:id,
		                	  status:status,
		                	  reason:reason
		                  },
		                    success: function (text) {
		                    	bootstrapQ.msg({
		 						    msg  : '操作成功！',
		 						    type : 'success',
		 						    time : 2000
		 						});
		                    	setTimeout("window.location.reload(true)",100);
		                    },
		                    error: function () {
		                    	bootstrapQ.msg({
		 						    msg  : '操作失败！',
		 						    type : 'danger',
		 						    time : 2000
		 						});
		                    	setTimeout("window.location.reload(true)",1000);
		                    } 
		             }); 
				  })
			}
		}
		
		function showInfo(){
			//信息框宽度300，高度200
			//Y轴上鼠标距离哪边远，就显示在哪边
			var ch = $(window).height();
			var cw = $(window).width();
			var timer;
			$(document).on('mouseover',"#table img",function(e){
				$("#m-info").html('<img src='+this.src+'>').show();
			});
			$(document).on('mousemove',"#table img",function(e){
				//timer && clearTimeout(timer);
				var x = e.pageX;
				var y = e.pageY;
				var l,t;
				if(x>cw/2){
					//靠近右边
					l = x-300;
				}else{
					l = x;
				}
				if(y>ch/2){
					//靠近下边
					t = y-200;
				}else{
					t = y;
				}
				$("#m-info").css({
					top:t,
					left:l
				});		
			});
			$(document).on('mouseout',"#table img",function(){
				//timer = setTimeout(function(){
					$("#m-info").hide();
				//},200);		
			});
		}
		showInfo();
	</script>
</body>
</html>